<template>
  <div>
    <!-- 按钮组/搜索框 -->
    <zx-btn-group>
      <zx-btn @click="openModal" size="is-small" :round="true" type="success">新增</zx-btn>
      <zx-btn
        @click="orderData"
        size="is-small"
        :round="true"
        type="warning"
      >{{isDesc?'降序排列':'升序排列'}}</zx-btn>
      <zx-btn @click="delCheckbox" size="is-small" :round="true" type="danger">批量删除</zx-btn>
    </zx-btn-group>
    <div class="field has-addons" style="position:absolute;top:24px;right:24px;">
      <div class="control">
        <input
          class="input is-rounded"
          @keyup.enter="searchFun"
          type="text"
          v-model="search"
          placeholder="按照商品名查询"
        />
      </div>
      <div class="control">
        <zx-btn @click="searchFun" :loading="true" :round="true" type="info">搜索</zx-btn>
      </div>
    </div>
    <!-- 按钮组/搜索框 -->
    <!-- 表格 API:列头/表格数据/按钮组事件(从0开始，按照索引)/多选框点击事件 -->
    <zx-table :columns="tableRow" :data="tableData" @selectChange="selectChange" />
    <!-- 表格 -->
    <!-- 分页 API:当前页/每页显示几条/总条数/翻页事件 -->
    <zx-page
      :curP="curP"
      :pageSize="pageSize"
      :pageSizeArr="pageSizeArr"
      :total="total"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    />
    <!-- 分页 -->
    <!-- 模态框 API：插槽（头/身/尾） -->
    <zx-modal v-show="showModal">
      <template #header>
        <p class="modal-card-title">{{isAdd?'新增':'修改'}}用户信息</p>
        <button @click="closeModal" class="delete" aria-label="close"></button>
      </template>
      <template #default>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">商品名：</label>
          <input v-model="formData.name" name="name" class="input" type="text" />
        </div>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">商品价格：</label>
          <input v-model="formData.price" name="price" class="input" type="text" />
        </div>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">类型：</label>
          <input v-model="formData.type" name="type" class="input" type="number" />
        </div>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">折扣：</label>
          <div class="control">
            <label class="radio">
              <input v-model="formData.discount" value="有折扣" type="radio" name="discount" />
              有折扣
            </label>
            <label class="radio">
              <input v-model="formData.discount" value="无折扣" type="radio" name="discount" />
              无折扣
            </label>
          </div>
        </div>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">商品下拉：</label>
          <div class="select">
            <select v-model="formData.shopSel" name="shopSel">
              <option value="0">请选择</option>
              <option value="下拉菜单1">下拉菜单1</option>
              <option value="下拉菜单2">下拉菜单2</option>
              <option value="下拉菜单3">下拉菜单3</option>
            </select>
          </div>
        </div>
        <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">商品多选：</label>
          <label class="checkbox">
            <input
              v-model="formData.shopCheckbox"
              value="AAA"
              name="shopCheckbox[]"
              type="checkbox"
            />
            AAA
          </label>
          <label class="checkbox">
            <input
              v-model="formData.shopCheckbox"
              value="BBB"
              name="shopCheckbox[]"
              type="checkbox"
            />
            BBB
          </label>
          <label class="checkbox">
            <input
              v-model="formData.shopCheckbox"
              value="CCC"
              name="shopCheckbox[]"
              type="checkbox"
            />
            CCC
          </label>
          <label class="checkbox">
            <input
              v-model="formData.shopCheckbox"
              value="DDD"
              name="shopCheckbox[]"
              type="checkbox"
            />
            DDD
          </label>
        </div>
        <!-- <div class="field has-addons">
          <label style="flex-basis:28%;" class="label">图片：</label>
          <input v-model="formData.img" name="img" class="input" type="text" />
        </div>-->
        <div class="file" style="position:relative">
          <label class="file-label">
            <input
              class="file-input"
              @change="fileChange"
              ref="imgUpload"
              type="file"
              name="img"
            />
            <span class="file-cta">
              <span class="file-label">选择一个图片</span>
            </span>
          </label>
          <img
            :src="shopImgPath"
            width="200px"
            height="300px"
            style="position:absolute;right:10px;bottom:10px;"
          />
        </div>
      </template>
      <template v-slot:footer>
        <zx-btn @click="submitForm" type="success">{{isAdd?'新增':'修改'}}</zx-btn>
        <zx-btn @click="closeModal">取消</zx-btn>
      </template>
    </zx-modal>
    <!-- 模态框 -->
    <!-- 普通组件 -->
    <!-- <nomal-loading :isShow="loading" /> -->
    <!-- 全局组件 -->
    <!-- <global-loading :isShow="loading" /> -->
    <!-- 查看图片 -->
    <div v-show="imgShow" class="imgWp" @click="imgShow = false">
      <img :src="shopImgPath" style="width:600px;height:400px;" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { shopsUrl, shopImgUrl } from "../utils/url.js";
import ZxBtn from "../uiComps/ZxBtn.vue";
import ZxBtnGroup from "../uiComps/ZxBtnGroup.vue";
import Modal from "../uiComps/Modal.vue";
import ZxTable from "../uiComps/ZxTable.vue";
import Page from "../uiComps/Page.vue";
import Loading from "@/loading/Loading.vue";
export default {
  data() {
    return {
      tableRow: [
        { type: "selection", width: 60, align: "center" },
        { type: "index", width: 60, align: "center" },
        { title: "商品名", key: "name", width: 80 },
        {
          title: "商品价格",
          key: "price",
          width: 100,
          align: "center",
          sort: "sort"
        },
        { title: "类型", key: "type", width: 80 },
        {
          title: "图片",
          type: "action",
          align: "center",
          btns: [
            {
              name: "查看",
              type: "info",
              size: "is-small",
              click: row => {
                this.imgShow = true;
                this.shopImgPath = shopImgUrl + row.img;
              }
            }
          ]
        },
        { title: "折扣", key: "discount", align: "center" },
        { title: "商品下拉", key: "shopSel", align: "center" },
        { title: "商品多选", key: "shopCheckbox", align: "center" },
        {
          title: "操作",
          type: "action",
          btns: [
            {
              name: "修改",
              type: "warning",
              size: "is-small",
              click: row => {
                this.changeData(row);
              }
            },
            {
              name: "删除",
              type: "danger",
              size: "is-small",
              round: true,
              click: row => {
                this.deleteData(row);
              }
            },
            {
              name: "查看",
              type: "info",
              size: "is-small",
              click: row => {
                this.$router.push({
                  name: "ShopDetails",
                  query: row
                });
              }
            }
          ]
        }
      ],
      tableData: [],
      showModal: false,
      isAdd: true,
      formData: {
        shopCheckbox: []
      },
      search: "",
      delId: "",
      curP: 1,
      pageSize: 5,
      pageSizeArr: [1, 2, 3, 5],
      total: 1,
      order: "desc",
      isDesc: true,
      loading: false,
      shopImgPath: "",
      imgShow: false
    };
  },
  watch: {
    total() {
      let totalNum = Math.ceil(this.total / this.pageSize);
      this.curP > totalNum ? (this.curP = totalNum) : null;
    },
    curP() {
      this.getData();
    }
  },
  methods: {
    orderData() {
      this.isDesc = !this.isDesc;
      this.order = this.isDesc ? "desc" : "asc";
      this.getData();
    },
    openModal() {
      this.showModal = true;
      this.formData = {
        shopCheckbox: []
      };
      this.shopImgPath = "";
    },
    closeModal() {
      this.showModal = false;
      this.isAdd = true;
    },
    submitForm() {
      if (!this.formData.name) {
        alert("用户名不能为空");
        return;
      }
      let fd = new FormData();
      fd.append("id", this.formData.id);
      fd.append("name", this.formData.name);
      fd.append("price", this.formData.price);
      fd.append("type", this.formData.type);
      fd.append("discount", this.formData.discount);
      fd.append("shopSel", this.formData.shopSel);
      fd.append("shopCheckbox[]", this.formData.shopCheckbox);
      fd.append("oldimg", this.formData.img);
      fd.append("img", this.$refs["imgUpload"].files[0]);
      axios({
        url: shopsUrl,
        method: "post",
        data: fd
      }).then(res => {
        this.getData();
      });
      this.closeModal();
    },
    changeData(item) {
      this.openModal();
      this.isAdd = false;
      this.formData = { ...item };
      this.formData.shopCheckbox = this.formData.shopCheckbox
        .split(",")
        .filter(item => item != "");
      this.shopImgPath = shopImgUrl + this.formData.img;
    },
    fileChange() {
      let fd = new FormData();
      fd.append("img", this.$refs["imgUpload"].files[0]);
      axios({
        url: "http://localhost/img.php",
        method: "post",
        data: fd
      }).then(res => {
        this.shopImgPath = "http://localhost/lsimgs/" + res.data;
      });
    },
    deleteData(item) {
      if (confirm("确定要删除吗")) {
        this.delId = item.id;
        this.getData(this.delId);
        this.delId = "";
      }
    },
    delCheckbox() {
      if (this.delId == "") {
        return;
      }
      if (confirm("确定要删除吗")) {
        this.getData(this.delId);
        this.delId = "";
      }
    },
    selectChange(arr) {
      let ids = [];
      arr.forEach(item => {
        ids.push(item.id);
      });
      this.delId = ids.join(",");
    },
    searchFun() {
      this.curP = 1;
      this.getData();
    },
    getData(id) {
      // this.loading = true;
      this.$loading.show();
      axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: shopsUrl,
        method: "get",
        params: {
          search: this.search,
          id,
          page: this.curP,
          pageSize: this.pageSize,
          order: this.order
        }
      }).then(res => {
        // console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.total * 1;
        // this.loading = false;
        this.$loading.hide();
      });
    },
    pageChange(p) {
      this.curP = p;
      this.getData();
    },
    pageSizeChange(curSize) {
      this.pageSize = curSize;
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    "zx-modal": Modal,
    "zx-table": ZxTable,
    "zx-page": Page,
    ZxBtn,
    ZxBtnGroup,
    "nomal-loading": Loading
  }
};
</script>

<style scoped>
.imgWp {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
